<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>插值表达式</title>
</head>
<body>
    <!-- 
        插值表达式是一种模板语法
        作用：利用表达是进行模板渲染
        语法：{{表达式}}

        注意使用的变量一定要在数据模型中声明了
        不能写 if for 
        不能作为属性值
     -->
    <div id="app">
        {{nickname}}
        {{nickname.toUpperCase()}}
    </div>
</body>

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>

<script>
    const app = new Vue({
        el:'#app',
        data:{
            nickname:'nickname'
        }
    })
</script>
</html>